"use strict";
import * as React from 'react';
import MyText from "./MyText";
import { commonStyles } from "../assets/styles/common";
import { segmentStyles } from "../assets/styles/segment";
const { View, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
class MySegmentControl extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            currentIndex: props.selectedIndex,
        };
    }
    onItemPress(currentIndex) {
        this.setState({ currentIndex });
        this.props.onChange && this.props.onChange(currentIndex);
    }
    getContainerStyle() {
        const { values, tintColor, color, height } = this.props;
        return {
            flex: 1,
            height
        };
    }
    ;
    getItemStyle(index) {
        const { values, tintColor, color, height } = this.props;
        const { currentIndex } = this.state;
        let styles = {};
        styles['backgroundColor'] = currentIndex === index ? tintColor : color;
        styles['borderTopWidth'] = 1;
        styles['borderTopColor'] = tintColor;
        styles['borderBottomWidth'] = 1;
        styles['borderBottomColor'] = tintColor;
        if (index == 0) {
            styles['borderTopLeftRadius'] = 5;
            styles['borderBottomLeftRadius'] = 5;
            styles['borderLeftWidth'] = 1;
            styles['borderLeftColor'] = tintColor;
        }
        else if (index === values.length - 1) {
            styles['borderTopRightRadius'] = 5;
            styles['borderBottomRightRadius'] = 5;
            styles['borderRightWidth'] = 1;
            styles['borderRightColor'] = tintColor;
            styles['borderLeftWidth'] = 1;
            styles['borderLeftColor'] = tintColor;
        }
        else {
            styles['borderLeftWidth'] = 1;
            styles['borderLeftColor'] = tintColor;
        }
        return styles;
    }
    getItemTextStyle(index) {
        const { values, tintColor, color, height } = this.props;
        const { currentIndex } = this.state;
        let styles = {};
        styles['color'] = currentIndex !== index ? tintColor : color;
        return styles;
    }
    render() {
        const { values, style } = this.props;
        return (<View style={[style, commonStyles.flexRow, segmentStyles.container, Object.assign({}, this.getContainerStyle())]}>
                {values.map((item, index) => (<TouchableOpacity key={index} activeOpacity={0.9} style={[commonStyles.flex1]} onPress={this.onItemPress.bind(this, index)}>
                        <View style={[commonStyles.flex1, segmentStyles.item, Object.assign({}, this.getItemStyle(index))]}>
                            <MyText style={[Object.assign({}, this.getItemTextStyle(index))]}>{item}</MyText>
                        </View>
                    </TouchableOpacity>))}
            </View>);
    }
}
MySegmentControl.defaultProps = {
    color: '#fff',
    tintColor: '#000',
    selectedIndex: 3,
    values: [],
    style: null,
    onChange: null,
};
export default MySegmentControl;
